<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="190px"
             style="width: 100%; padding: 0 30px;">

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="撤销原因" prop="telephone">
            <el-input v-model="temp.remark"/>
          </el-form-item>
          <el-form-item label="上传文件" label-width="190px" prop="bizLicenseSignpic">
            <el-input v-model="temp.bizLicenseSignpic" type="hidden"/>
            <el-upload
              ref="licenseSignpicUpload"
              action="string"
              accept="image/*"
              :limit="imgLimit"
              :file-list="licenseSignpicImgs"
              :multiple="licenseSignpicIsMultiple"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemoveLicenseSignpic"
              :on-exceed="handLeExceed"
              :auto-upload="true"
              :before-upload="beforeUpload"
              :http-request="licenseSignpicUpload">
              <i class="el-icon-plus" style="line-height: 100px;width: 100px;height: 100px;"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body width="70%">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注：1.文件要求主管部门盖章，分管领导及以上签字！  2.文件为JPG格式，上传的图片大小不能超过2M！" label-width="100%">
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { createApi, fetchList, uploadImg } from './api'
  // 导入多选项组件
  import SelectOption from '@/views/coding/components/SelectOption'

  export default {
    name: 'MhProjectInfo-FormDetail',

    components: { SelectOption },

    props: {
      isModule: {
        type: Boolean,
        default: false
      },
      row: {}
    },

    data() {
      return {
        // checked: true,
        rules: {
          bizLicenseSignpic: [{ required: true, message: '请上传备注所述文件图片', trigger: 'blur' }]
        },
        temp: {},
        dialogVisible: false,
        dialogImageUrl: '',
        licenseSignpicImgs: [],
        licenseSignpicArr: [],
        licenseSignpicIsMultiple: false,
        imgLimit: 1,//上传文件个数限制
        key: 1
      }
    },

    watch: {
      'row': {
        immediate: true, // vue首次赋值不触发watch的解决方法
        handler: function(nval) {
          if (this.isModule) {
            // this.temp = Object.assign({}, this.row) // copy obj
            if (this.isNull(nval)) {
              return
            }
            if (this.isNull(nval.id)) {
              return
            }
            this.getList(nval.id)
          }
        }
      }
    },

    methods: {
      licenseSignpicUpload(params) {//上传社会信用统一代码证
        let formData = new FormData()
        formData.append('file', params.file)
        uploadImg(formData).then(res => {
          if (res.success) {
            params.file.url = res.map.url
            params.file.group = res.map.group
            this.licenseSignpicImgs.push(params.file)
            this.licenseSignpicArr.push(res.map.url)
          }
        })
      },
      handleRemoveLicenseSignpic(file, fileList) {//删除指定社会信用统一代码证
        this.licenseSignpicImgs.length = 0
        this.licenseSignpicArr.length = 0
        this.temp.bizLicenseSignpic = ''
        fileList.forEach((item, index) => {
          // console.log(item.raw.url);
          this.licenseSignpicImgs.push(item)
          this.licenseSignpicArr.push(item.url)
        })
      },
      licenseSignpicClearFiles() {//清除全部社会信用统一代码证
        this.$refs.licenseSignpicUpload.clearFiles()
        this.licenseSignpicImgs=[]
        this.licenseSignpicArr=[]
      },
      handlePictureCardPreview(file) {//点击文件列表中已上传的文件时的钩子
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },

      handLeExceed(files, fileList) {//文件超出个数限制时的钩子
        this.$notify({ title: '警告', type: 'warning', message: '当前只允许选择' + this.imgLimit + '张图片' })
        return false
      },
      beforeUpload(file) {
        //上传文件之前的钩子
        //验证图片大小
        const isLt5M = file.size > 1024 * 1024 * 2//2M
        if (isLt5M) {
          this.$notify({ title: '警告', type: 'warning', message: '上传的图片大小不能超过2M' })
          return false
        }
      },
      getList(_id) {
        this.resetTemp()
        fetchList({ id: _id }).then(result => {
          if (!result.success) {
            this.notify(result)
            return
          }
          this.temp = result.map.rows[0]
        })
      },
      // 给外部调用，清空form
      resetTemp() {
        this.temp = {
          status: '',
          id: undefined
        };
        this.licenseSignpicClearFiles();
      },
      // 给外部调用，设置默认值，请根据实际情况修改id值
      defaultTemp() {
        this.temp = {
          status: 1 //设置默认值 项目状态    (0, "正常"), (1, "撤销中"),(2, "已撤销")(3, "草稿");
        }
      },
      // 树表： 拿当前节点ID作为父节点ID，建立树关系
      setParentNodeId(id) {
        // this.temp.mhProjectInfoId = id
        this.temp.parentId = id
      },
      // 给外部调用,修改记录,状态status 为 1 撤销
      withdraw() {
        // this.temp.bizLicenseSignpic = JSON.stringify(this.licenseSignpicArr)
        this.temp.fileAddress = JSON.stringify(this.licenseSignpicArr)

        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$confirm('确认撤销吗？').then(_ => {
              const param = { id: this.temp.id }
              //项目状态改为提交
              param.status = 1
              param.fileAddress = this.temp.fileAddress
              param.remark = this.temp.remark
              createApi(param).then((r) => {
                this.notify(r)
                if (r.success) {
                  this.resetTemp()
                  // 从父组件调用此方法，进行回调下
                  if (this.isModule) {
                    this.$emit('withdrawResult')
                  }
                }
              })
              // end
            })
              .catch(_ => {
              })

          }
        })

      },

      // // 给外部调用，修改记录,状态status 为 1 撤销
      //
      // updateData() {
      //   this.$refs['dataForm'].validate((valid) => {
      //     if (valid) {
      //       this.$confirm('确认提交吗？').then(_ => {
      //         // columnsTag.column4Add
      //         const param = { id: this.temp.id }
      //
      //         param.status = 1
      //
      //         createApi(param).then((r) => {
      //           this.notify(r)
      //           if (r.success) {
      //             this.resetTemp()
      //             // 从父组件调用此方法，进行回调下
      //             if (this.isModule) {
      //               this.$emit('updateResult')
      //             }
      //           }
      //         })
      //       })
      //         .catch(_ => {
      //         })
      //
      //     }
      //   })
      //
      // },

      // 给外部调用，清除校验
      clearValidate() {
        this.$refs['dataForm'].clearValidate()
      }
    }

  }
</script>
<style>

</style>
